import React, { PureComponent } from 'react'

import {StoreContext} from './context'
// 高阶函数内返回高阶组件
export default function connect(mapStateToProps, mapDispatchToProps) {
  return function enhanceHOC(WrappedComponent) { 
    class EnhanceComponent extends PureComponent {
      constructor(props,context){
        super(props, context)
        this.state = {
          storeState: mapStateToProps(context.getState())
        }
      }
    
      componentDidMount(){
        // 订阅赋值后界面才会改变
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({storeState: mapStateToProps(this.context.getState())})
        })
      }
    
      componentWillUnmount(){
        this.unsubscribe()
      }
    
      render() {
        return <WrappedComponent {...this.props} 
          {...mapStateToProps(this.context.getState())} {...mapDispatchToProps(this.context.dispatch)}/>
      }
    }
    EnhanceComponent.contextType = StoreContext
    return EnhanceComponent
  }
}


